<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>

      <!-- 搜索部分 -->
      <el-form :model="queryMap" size="mini" :inline="true">

        <el-form-item label="类型">
          <el-select clearable v-model="queryMap.type" placeholder="请选择入库类型">
            <el-option label="捐赠" value="1"></el-option>
            <el-option label="下拨" value="2"></el-option>
            <el-option label="采购" value="3"></el-option>
            <el-option label="借用" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单号">

          <el-input
              clearable
              v-model="queryMap.inNum"
              placeholder="请输入入库单查询"
              @keyup.enter.native=""
              class="input-with-select"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryMap.status" placeholder="请选择状态">
            <el-option label="已入库" :value="0"></el-option>
            <el-option label="回收站" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              :clearable="false"
              v-model="range"
              type="datetimerange"
              :unlink-panels="true"
              :value-format="'yyyy-MM-dd HH:mm:ss'"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" type="warning" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <router-link to="/addStocks">
            <el-button type="success" icon="el-icon-plus">入库</el-button>
          </router-link>
        </el-form-item>

        <el-form-item>
          <el-button type="button" icon="el-icon-download">导出</el-button>
        </el-form-item>

      </el-form>
      <!--表格部分-->
      <el-table size="mini" v-loading="loading" :data="tableData" border style="width: 100%;" max-height="580">
        <el-table-column label="#" prop="id" width="50"></el-table-column>
        <el-table-column prop="inNum" :show-overflow-tooltip='true' label="入库单号" width="180"></el-table-column>
        <el-table-column prop="type" label="物资类型" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type===1">捐赠</el-tag>
            <el-tag v-else-if="scope.row.type===2">下拨</el-tag>
            <el-tag type="danger" v-else-if="scope.row.type===3">采购</el-tag>
            <el-tag type="warning" v-else>借用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productNumber" label="数量" sortable width="100"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.status==1">回收</el-tag>
            <el-tag size="mini" effect="plain" v-if="scope.row.status==0">已入库</el-tag>
            <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.status==2">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作员" width="180"></el-table-column>
        <el-table-column prop="supplierName" label="物资提供方" width="180"></el-table-column>
        <el-table-column prop="createTime" label="入库时间" sortable width=""></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">
                 <el-button icon="el-icon-view" type="text" size="mini" @click="getDetail(scope.row.id)">明细</el-button>

             <el-popconfirm
                 title="你确定要删除此入库单吗？"
                 @confirm="deleteInStocks(scope.row.id)"
                 icon-color="red"

             >
                             <el-button slot="reference" icon="el-icon-view" type="text" size="mini">删除</el-button>

             </el-popconfirm>
            </span>

            <span v-if="scope.row.status===2">


              <el-popconfirm
                     title="是否通过此入库单？"
                     @confirm="passInStocks(scope.row.id)"
              >
                             <el-button slot="reference" icon="el-icon-edit" type="text" size="mini">审批</el-button>

             </el-popconfirm>

                  <el-popconfirm
                      title="你确定要删除此入库单吗？"
                      @confirm="deleteInStocks(scope.row.id)"
                      icon-color="red"
                  >
                             <el-button slot="reference" icon="el-icon-view" type="text" size="mini">删除</el-button>

             </el-popconfirm>
            </span>

          </template>
        </el-table-column>


      </el-table>

      <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :unlink-panels="true"
          :current-page="current"
          :page-sizes="[6, 8, 10, 15]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </el-card>


    <el-dialog
        title="入库明细"
        :visible.sync="detailDialogVisible"
        width="60%"
    >
      <el-card>
        <el-row>
          <el-col :span="8">
            <div>
              省区市 :
              <el-tag size="small"> {{ supplier.address }}</el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              具体位置 :
              <el-tag size="small"> {{ supplier.name }}</el-tag>

            </div>
          </el-col>
          <el-col :span="5">
            <div>
              联系人 :
              <el-tag size="small"> {{ supplier.contact }}</el-tag>
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              电话 :
              <el-tag size="small"> {{ supplier.phone }}</el-tag>
            </div>
          </el-col>
        </el-row>

      </el-card>

      <!--                步骤条-->
      <el-steps simple v-if="pStatus==0" style="margin:10px 0 10px 0" :space="200" :active="3"
                finish-status="success">
        <el-step title="提交入库单"></el-step>
        <el-step title="审核入库单"></el-step>
        <el-step title="进入库存"></el-step>
      </el-steps>
      <el-steps simple v-if="pStatus==2" :space="200" :active="2"
                finish-status="success">
        <el-step title="提交入库单"></el-step>
        <el-step title="审核入库单"></el-step>
        <el-step title="进入库存"></el-step>
      </el-steps>

      <!--表格-->
      <el-table
          v-loading="inStockLoading"
          :data="itemVOS"
          stripe
          height="280px"
          border
          style="width: 100%">
        <el-table-column
            prop="name"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="pnum"
            label="商品编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="model"
            label="规格">
        </el-table-column>
        <el-table-column
            prop=""
            label="图片">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover">
              <el-image
                  slot="reference"
                  style="width: 38px; height: 38px"
                  :src="scope.row.imageUrl"
                  fit="fit"></el-image>
              <el-image
                  style="width: 200px; height: 200px"
                  :src="scope.row.imageUrl"
                  fit="fit"></el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="count"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="unit"
            label="单位">
        </el-table-column>
      </el-table>

      <span style="margin-top: 10px">
  <el-pagination
      @current-change="handleSizeChangeItem"
      :current-page.sync="currentPage2"
      :page-size="3"
      layout="total, prev, pager, next"
      :total="itemTotal">
    </el-pagination>
  </span>
    </el-dialog>


  </div>
</template>

<script>
import {deleteInStocks, getDetail, getList, pass} from "@/network/business/IsStocks";

export default {
  name: "InStocks",
  data() {
    return {
      queryMap: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '今天(此刻)',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime());
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {}, {
            text: '最近两个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      tableData: [],//表格数据
      loading: true,//加载
      current: 1,//当前页
      size: 6,//每页数量
      total: 0,//总条数
      range: [],//时间数组
      detailDialogVisible: false, //明细弹窗
      pStatus: 0,
      inStockLoading: true,
      supplier: {},
      itemVOS: [],
      currentPage2: 1,
      itemTotal: 0,
      inStocksID: undefined


    }
  },
  created() {
    this.getList()
  },
  methods: {
    /*删除入库单*/
    deleteInStocks(id) {
      deleteInStocks(id).then((res) => {
        console.log(res)
        if (res.success){
          this.$message({
            message: '恭喜你,删除入库单成功！！！',
            type: 'success'
          });
          //刷新页面
          this.getList()
        }else {
          this.$message.error(res.message);
        }
      })
    },
    /*审批入库单*/
    passInStocks(id) {
      pass(id).then((res) => {
        console.log(res)
        if (res.success){
          this.$message({
            message: '审批通过',
            type: 'success'
          });
          //刷新页面
          this.getList()
        }else {
          this.$message.error(res.message);
        }
      })
    },

    /*获取表单数据*/
    getList() {
      getList(this.current, this.size, this.queryMap).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false
      })
    },
    /*数组每页条数*/
    handleSizeChange(val) {
      this.size = val
      console.log(`每页 ${val} 条`);
      this.getList()
    },
    /*第几页*/
    handleCurrentChange(val) {
      this.current = val
      this.getList()
    },
    /*查询*/
    query() {
      console.log(this.range)
      if (this.range != null && this.range.length === 2) {
        this.queryMap.startTime = this.range[0]
        this.queryMap.endTime = this.range[1]
      }

      console.log(this.queryMap)

      this.getList()
    },
    /*重置*/
    reset() {
      this.queryMap = {}
    },
    getDetailByID(id) {
      getDetail(id, this.currentPage2).then((res) => {
        console.log(res)
        this.supplier = res.data.inStockDetailVO.supplier
        this.itemVOS = res.data.inStockDetailVO.itemVOS
        this.itemTotal = res.data.inStockDetailVO.total
        this.inStockLoading = false
      })

    },
    /*第几页 详情的*/
    handleSizeChangeItem(val) {
      this.currentPage2 = val
      this.getDetailByID(this.inStocksID)
    },
    /*详情*/
    getDetail(id) {
      console.log(id)
      this.inStocksID = id
      this.getDetailByID(this.inStocksID)
      this.detailDialogVisible = true

    }
  }
}
</script>

<style scoped>

</style>